// 源插件
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';
import { NumberDivide, DateDiff, FormatnumberZero, Mover, DateStamp } from '@/function.js';
import {
  BackTop,
  Empty,
  Spin,
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Steps,
  Radio,
  Upload,
  notification,
} from 'antd';
import ExportJsonExcel from '@/components/XLSXOUT/js-export-excel-custom';
// 视图插件

// 外部组件
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Loading from '@/components/Loading/Loading';
import NewTwoFormModal from './NewTwoFormModal';

// css OR less预编译器
import styles from './All.less';

const XLSX = require('js-xlsx');

// 图片

/**
 *  Describe:数据连接
 *  Created by xjc on 2019/5/15
 */
const EditableContext = React.createContext();

const EditableRow = ({ form, index, ...props }) => (
  <EditableContext.Provider value={form}>
    <tr {...props} />
  </EditableContext.Provider>
);

const EditableFormRow = Form.create()(EditableRow);

class EditableCell extends React.Component {
  state = {
    editing: false,
  };

  toggleEdit = () => {
    const editing = !this.state.editing;
    this.setState({ editing }, () => {
      if (editing) {
        this.input.focus();
      }
    });
  };

  save = e => {
    const { record, handleSave } = this.props;
    this.form.validateFields((error, values) => {
      if (error && error[e.currentTarget.id]) {
        return;
      }
      this.toggleEdit();
      handleSave({ ...record, ...values });
    });
  };

  noSaveOut = e => {
    const { record, handleSave } = this.props;
    this.form.validateFields((error, values) => {
      if (error && error[e.currentTarget.id]) {
        return;
      }
      this.toggleEdit();
      // handleSave({ ...record, ...values });
    });
  };

  renderCell = form => {
    this.form = form;
    const { children, dataIndex, record, title } = this.props;
    const { editing } = this.state;
    let nullFlag = false;
    if (
      children[2].props.children === null ||
      children[2].props.children === '' ||
      typeof children[2].props.children === 'undefined'
    ) {
      nullFlag = true;
    }
    return editing ? (
      <Form.Item style={{ margin: 0 }}>
        {form.getFieldDecorator(dataIndex, {
          rules: [
            /* {
               required: true,
               message: `${title} is required.`,
             }, */
          ],
          initialValue: record[dataIndex],
        })(
          <Input
            ref={node => (this.input = node)}
            onPressEnter={this.save}
            onBlur={this.noSaveOut}
          />
        )}
      </Form.Item>
    ) : (
      <div
        className={styles.editableCellValueWrap}
        style={{ padding: nullFlag ? '5px 12px' : '' }}
        onClick={this.toggleEdit}
      >
        {children}
      </div>
    );
  };

  render() {
    const {
      editable,
      dataIndex,
      title,
      record,
      index,
      handleSave,
      children,
      ...restProps
    } = this.props;
    return (
      <td {...restProps}>
        {editable ? (
          <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
        ) : (
          children
        )}
      </td>
    );
  }
}

@connect(({ fu, loading }) => ({
  fu,
  loading: loading.models.fuRule,
}))
@Form.create()
class NewTwoForm extends PureComponent {
  componentWillMount() {}

  /**
   *  Describe:当前状态
   *  Created by xjc on 2019/5/15
   */

  state = {
    listLoading: false, // 加载状态
    selectedRows: [], // 选择行
    formValues: {
      num: 10,
      page: 1,
    }, // 表格参数
    /* pageValues:{current: 1, pageSize: 10, total: 0}, */
    Visible: false, // modal开关
    record: {}, // 当前行内容
    searchText: '', // 搜索内容
    columns: [], // 表头处理结果
    currentDataSourceBellWether: [], // 表剩余数据
    currentDataSourceETF: [], // 表剩余数据
    editingKey: '', // 编辑表格
  };

  columns = [];

  columnsInfos = [
    {
      title: '类型',
      dataIndex: 'name',
      width: 100,
      align: 'center',
    },
    {
      title: '今日盈亏',
      dataIndex: 'profitToday',
      align: 'center',
      width: 110,
      render: (value, row, index) => {
        let color;
        if (value > 0) {
          color = '#22aa22';
        } else {
          color = '#ff4d4f';
        }
        return <span style={{ color }}>{NumberDivide(value, null, '$')}</span>;
      },
    },
    {
      title: '今日盈亏百分比',
      dataIndex: 'percent',
      align: 'center',
      width: 110,
      render: (value, row, index) => {
        let color;
        if (value > 0) {
          color = '#22aa22';
        } else {
          color = '#ff4d4f';
        }
        return <span style={{ color }}>{NumberDivide(value * 100, 2, '%')}</span>;
      },
    },
    {
      title: '仓位敞口',
      dataIndex: 'marketValue',
      align: 'center',
      width: 110,
      render: (value, row, index) => {
        return <span>{NumberDivide(value, null, '$')}</span>;
      },
    },
  ];
  /**
   *  Describe:本地搜索
   *  Created by xjc on 2019/6/4
   */

  getColumnSearchProps = dataIndex => ({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
      <div style={{ padding: 8 }}>
        <Input
          ref={node => {
            this.searchInput = node;
          }}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
          style={{ width: 188, marginBottom: 8, display: 'block' }}
        />
        <Button
          type="primary"
          onClick={() => this.handleSearch(selectedKeys, confirm)}
          icon="search"
          size="small"
          style={{ width: 80, marginRight: 8 }}
        >
          搜索
        </Button>
        <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 80 }}>
          重置
        </Button>
      </div>
    ),
    filterIcon: filtered => (
      <Icon type="search" style={{ color: filtered ? '#1880ff' : '#181816', fontWeight: '700' }} />
    ),
    onFilter: (value, record) => {
      if (record[dataIndex] === '合计:') {
        return true;
      }
      return record[dataIndex] === null
        ? ''
        : record[dataIndex]
            .toString()
            .toLowerCase()
            .includes(value.toLowerCase());
    },
    onFilterDropdownVisibleChange: visible => {
      if (visible) {
        setTimeout(() => this.searchInput.select());
      }
    },
    render: text => <span>{text}</span>,
  });

  handleSearch = (selectedKeys, confirm) => {
    confirm();
    this.setState({ searchText: selectedKeys[0] });
  };

  handleReset = clearFilters => {
    clearFilters();
    this.setState({ searchText: '' });
  };

  getColumns() {
    const {
      fu: { stocksFilters },
    } = this.props;
    let columns = [
      /* {
            title: '序号',
            dataIndex: 'p',
          }, */
      {
        title: '股票',
        dataIndex: 'code',
        width: 100,
        align: 'center',
        sorter: (a, b) => {
          if (b.code === '合计:') {
            return false;
          }
          const c = [a.code, b.code].sort();
          if (c[0] === a.code) {
            return 1;
          }
          return -1;
        },
        ...this.getColumnSearchProps('code'),
        // editable: true,
      },
      {
        title: '持有股数',
        dataIndex: 'num',
        align: 'center',
        width: 80,
        sorter: (a, b) => {
          if (b.code === '合计:') {
            return false;
          }
          return a.num - b.num;
        },
        render: (value, row, index) => {
          return <span>{NumberDivide(value)}</span>;
        },
        editable: true,
      },
      {
        title: '均价',
        dataIndex: 'avgprice',
        align: 'center',
        width: 80,
        sorter: (a, b) => {
          if (b.code === '合计:') {
            return false;
          }
          return a.avgprice - b.avgprice;
        },
        editable: true,
        render: (value, row, index) => {
          return <span>{NumberDivide(value, null, '$')}</span>;
        },
      },
      {
        title: '仓位敞口',
        dataIndex: 'marketvalue',
        align: 'center',
        width: 110,
        sorter: (a, b) => {
          if (b.code === '合计:') {
            return false;
          }
          return a.marketvalue - b.marketvalue;
        },
        render: (value, row, index) => {
          return <span>{NumberDivide(value, null, '$')}</span>;
        },
        editable: true,
      },
      {
        title: '收盘价',
        dataIndex: 'closeprice',
        align: 'center',
        width: 80,
        sorter: (a, b) => {
          if (b.code === '合计:') {
            return false;
          }
          return a.closeprice - b.closeprice;
        },
        render: (value, row, index) => {
          return <span>{NumberDivide(value, 2, '$')}</span>;
        },
        editable: true,
      },
      {
        title: '浮盈亏%',
        dataIndex: 'profitpercent',
        align: 'center',
        width: 80,
        sorter: (a, b) => {
          if (b.code === '合计:') {
            return false;
          }
          return a.profitpercent - b.profitpercent;
        },
        render: (value, row, index) => {
          return <span>{NumberDivide(value * 100, 2, '%')}</span>;
        },
        editable: true,
      },
      {
        title: '浮盈亏$',
        dataIndex: 'profit',
        align: 'center',
        width: 100,
        sorter: (a, b) => {
          if (b.code === '合计:') {
            return false;
          }
          return a.profit - b.profit;
        },
        render: (value, row, index) => {
          return <span>{NumberDivide(value, 2, '$')}</span>;
        },
        editable: true,
      },
      {
        title: '昨收',
        dataIndex: 'lastclose',
        align: 'center',
        width: 80,
        sorter: (a, b) => {
          if (b.code === '合计:') {
            return false;
          }
          return a.lastclose - b.lastclose;
        },
        render: (value, row, index) => {
          return <span>{NumberDivide(value, 2, '$')}</span>;
        },
        editable: true,
      },
      {
        title: '今日盈亏$',
        dataIndex: 'todayprofit',
        align: 'center',
        width: 110,
        sorter: (a, b) => {
          if (b.code === '合计:') {
            return false;
          }
          return a.todayprofit - b.todayprofit;
        },
        render: (value, row, index) => {
          return <span>{NumberDivide(value, 2, '$')}</span>;
        },
        editable: true,
      },
      {
        title: '今日盈亏%',
        dataIndex: 'todayprofitpercent',
        align: 'center',
        width: 90,
        sorter: (a, b) => {
          if (b.code === '合计:') {
            return false;
          }
          return a.todayprofitpercent - b.todayprofitpercent;
        },
        render: (value, row, index) => {
          return <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>;
        },
        editable: true,
      },
      {
        title: '股票敞口',
        dataIndex: 'marketpercent',
        align: 'center',
        width: 80,
        sorter: (a, b) => {
          if (b.code === '合计:') {
            return false;
          }
          return a.marketpercent - b.marketpercent;
        },
        render: (value, row, index) => {
          return <span>{NumberDivide(value * 100, 2, '%')}</span>;
        },
        editable: true,
      },
      {
        title: '仓位',
        dataIndex: 'position',
        align: 'center',
        width: 80,
        sorter: (a, b) => {
          if (b.code === '合计:') {
            return false;
          }
          return a.position - b.position;
        },
        render: (value, row, index) => {
          return <span>{NumberDivide(value)}</span>;
        },
        editable: true,
      },
      {
        title: '盈利日',
        dataIndex: 'profitdate',
        align: 'center',
        width: 110,
        sorter: (a, b) => {
          if (b.code === '合计:') {
            return false;
          }
          return DateStamp(a.profitdate) - DateStamp(b.profitdate);
        },
        render: (value, row, index) => {
          return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
        },
        editable: true,
      },
      {
        title: '备注',
        dataIndex: 'mark',
        align: 'center',
        width: 120,
        render: (value, row, index) => {
          return <span>{typeof value === 'string' ? value : ''}</span>;
        },
        editable: true,
      },
    ];

    columns = columns.map(col => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => ({
          record,
          editable: col.editable,
          dataIndex: col.dataIndex,
          title: col.title,
          handleSave: this.handleSave,
        }),
      };
    });
    return columns;
  }

  handleSave = row => {
    const { dispatch } = this.props;

    /* 导入列表数据 */
    dispatch({
      type: 'fu/UpdateFundTwoInfo',
      payload: row,
      callback: res => {
        /* 导入列表数据 */
        dispatch({
          type: 'fu/GetUBSNewTwoPosition',
          payload: {
            currentDataSourceBellWether: this.state.currentDataSourceBellWether,
            currentDataSourceETF: this.state.currentDataSourceETF,
          },
          callback: res => {},
        });
      },
    });
  };

  handleStandardTableChangeBellWether = (pagination, filtersArg, sorter, extra) => {
    const { dispatch } = this.props;
    const { formValues } = this.state;
    this.setState({
      currentDataSourceBellWether: extra.currentDataSource,
    });
    /* 导入列表数据 */
    dispatch({
      type: 'fu/GetUBSNewTwoPosition',
      payload: {
        currentDataSourceBellWether: extra.currentDataSource,
        currentDataSourceETF: this.state.currentDataSourceETF,
      },
      callback: res => {},
    });
  };

  handleStandardTableChangeETF = (pagination, filtersArg, sorter, extra) => {
    const { dispatch } = this.props;
    const { formValues } = this.state;
    this.setState({
      currentDataSourceETF: extra.currentDataSource,
    });
    /* 导入列表数据 */
    dispatch({
      type: 'fu/GetUBSNewTwoPosition',
      payload: {
        currentDataSourceETF: extra.currentDataSource,
      },
      callback: res => {},
    });
  };

  openVisible() {
    const { dispatch } = this.props;

    this.setState(
      {
        Visible: true,
      },
      () => {
        /* 导入列表数据 */
        dispatch({
          type: 'fu/GetUBSNewTwoPositionModal',
          payload: {},
          callback: res => {
            this.setState({
              currentDataSource: res.data,
            });
          },
        });
      }
    );
  }

  closeVisbile() {
    const { dispatch } = this.props;
    this.setState(
      {
        Visible: false,
      },
      () => {
        /* 导入列表数据 */
        dispatch({
          type: 'fu/GetUBSNewTwoPosition',
          payload: {},
          callback: res => {
            this.setState({
              currentDataSource: res.data,
            });
          },
        });
      }
    );
  }

  insertChart() {
    const that = this;
    const key = `open${Date.now()}`;
    const { dispatch } = that.props;
    const btn = (
      <Button
        type="primary"
        size="small"
        onClick={() => {
          notification.close(key);
          dispatch({
            type: 'fu/InsertValueChart',
          });
        }}
      >
        确定
      </Button>
    );
    notification.open({
      message: 'Notification Title',
      description: '是否开始生成',
      btn,
      key,
      onClose: close,
    });
  }

  outXlsx() {
    const dataInfos = this.props.fu.newTwoPosition.infos.list; // 表格数据
    const { infos } = this.props.fu.newTwoPosition; // 表格数据
    var option = {};
    const infosTable = [];
    if (dataInfos) {
      for (const i in dataInfos) {
        if (dataInfos) {
          const obj = {
            类型: dataInfos[i].name,
            今日盈亏: dataInfos[i].profitToday,
            今日盈亏百分比: NumberDivide(mathService.mul(dataInfos[i].percent, 100), 2, '%'),
            仓位敞口: dataInfos[i].marketValue,
          };
          infosTable.push(obj);
        }
      }
    }

    // debugger;
    const dataBellWether = this.props.fu.newTwoPosition.bellWether.list;
    const { bellWether } = this.props.fu.newTwoPosition;
    var option = {};
    const bellWetherTable = [];
    if (dataBellWether) {
      for (const i in dataBellWether) {
        if (dataBellWether) {
          const obj = {
            股票: dataBellWether[i].code,
            持有股数: dataBellWether[i].num,
            均价: dataBellWether[i].avgprice,
            仓位敞口: dataBellWether[i].marketvalue,
            收盘价: dataBellWether[i].closeprice,
            '浮盈亏%': NumberDivide(mathService.mul(dataBellWether[i].profitpercent, 100), 2, '%'),
            浮盈亏$: dataBellWether[i].profit,
            昨收: dataBellWether[i].lastclose,
            今日盈亏$: dataBellWether[i].todayprofit,
            '今日盈亏%': NumberDivide(
              mathService.mul(dataBellWether[i].todayprofitpercent, 100),
              2,
              '%'
            ),
            股票敞口: dataBellWether[i].marketpercent,
            仓位: dataBellWether[i].position,
            盈利日:
              typeof dataBellWether[i].profitdate === 'string'
                ? dataBellWether[i].profitdate.split(' ')[0]
                : '',
          };
          bellWetherTable.push(obj);
        }
      }
    }

    const etfWether = this.props.fu.newTwoPosition.etf.list;
    const { etf } = this.props.fu.newTwoPosition;
    var option = {};
    const etfTable = [];
    if (etfWether) {
      for (const i in etfWether) {
        if (etfWether) {
          const obj = {
            股票: etfWether[i].code,
            持有股数: etfWether[i].num,
            均价: etfWether[i].avgprice,
            仓位敞口: etfWether[i].marketvalue,
            收盘价: etfWether[i].closeprice,
            '浮盈亏%': NumberDivide(mathService.mul(etfWether[i].profitpercent, 100), 2, '%'),
            浮盈亏$: etfWether[i].profit,
            昨收: etfWether[i].lastclose,
            今日盈亏$: etfWether[i].todayprofit,
            '今日盈亏%': NumberDivide(
              mathService.mul(etfWether[i].todayprofitpercent, 100),
              2,
              '%'
            ),
            股票敞口: etfWether[i].marketpercent,
            仓位: etfWether[i].position,
            盈利日:
              typeof etfWether[i].profitdate === 'string'
                ? etfWether[i].profitdate.split(' ')[0]
                : '',
          };
          etfTable.push(obj);
        }
      }
    }
    option.fileName = infos.title;
    option.datas = [
      {
        sheetData: infosTable,
        sheetName: infos.title,
        sheetFilter: ['类型', '今日盈亏', '今日盈亏百分比', '仓位敞口'],
        sheetHeader: ['类型', '今日盈亏', '今日盈亏百分比', '仓位敞口'],
        columnWidths: [{ wpx: 100 }, { wpx: 100 }, { wpx: 100 }, { wpx: 100 }],
      },
      {
        sheetData: bellWetherTable,
        sheetName: '龙头股',
        sheetFilter: [
          '股票',
          '持有股数',
          '均价',
          '仓位敞口',
          '收盘价',
          '浮盈亏%',
          '浮盈亏$',
          '昨收',
          '今日盈亏$',
          '今日盈亏%',
          '股票敞口',
          '仓位',
          '盈利日',
        ],
        sheetHeader: [
          '股票',
          '持有股数',
          '均价',
          '仓位敞口',
          '收盘价',
          '浮盈亏%',
          '浮盈亏$',
          '昨收',
          '今日盈亏$',
          '今日盈亏%',
          '股票敞口',
          '仓位',
          '盈利日',
        ],
        columnWidths: [
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 120 },
        ],
      },
      {
        sheetData: etfTable,
        sheetName: 'ETF',
        sheetFilter: [
          '股票',
          '持有股数',
          '均价',
          '仓位敞口',
          '收盘价',
          '浮盈亏%',
          '浮盈亏$',
          '昨收',
          '今日盈亏$',
          '今日盈亏%',
          '股票敞口',
          '仓位',
          '盈利日',
        ],
        sheetHeader: [
          '股票',
          '持有股数',
          '均价',
          '仓位敞口',
          '收盘价',
          '浮盈亏%',
          '浮盈亏$',
          '昨收',
          '今日盈亏$',
          '今日盈亏%',
          '股票敞口',
          '仓位',
          '盈利日',
        ],
        columnWidths: [
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 120 },
        ],
      },
    ];

    const toExcel = new ExportJsonExcel(option);
    toExcel.saveExcel();
  }
  /**
   *  Describe:视图
   *  Created by xjc on 2019/5/15
   */

  render() {
    const {
      loading,
      fu: { newTwoPosition },
    } = this.props;
    const {
      listLoading,
      selectedRows,
      record,
      StocksDetailVisible,
      OptionVisible,
      Visible,
    } = this.state;
    const components = {
      body: {
        row: EditableFormRow,
        cell: EditableCell,
      },
    };
    if (
      this.columns.length === 0 &&
      newTwoPosition.bellWether.code === 0 &&
      newTwoPosition.etf.code === 0
    ) {
      this.columns = this.getColumns();
    }
    return (
      <PageHeaderWrapper title="新二号每日报表">
        <Card>
          <Button type="primary" onClick={this.openVisible.bind(this)} style={{ marginRight: 25 }}>
            标记股票池
          </Button>
          <Button type="primary" onClick={this.insertChart.bind(this)} style={{ marginRight: 25 }}>
            生成净值曲线
          </Button>
          <Button type="primary" onClick={this.outXlsx.bind(this)}>
            导出XLSX
          </Button>
          <br />
          <br />
          <br />
          {newTwoPosition.bellWether.code === 0 ||
          newTwoPosition.etf.code === 0 ||
          newTwoPosition.infos.code === 0 ? (
            <Loading />
          ) : (
            <EditableContext.Provider value={this.props.form} id="table">
              <StandardTable
                components={components}
                bordered
                title={() => (
                  <div style={{ textAlign: 'center', fontSize: '0.95rem' }}>
                    <span style={{ marginRight: 10 }}>{newTwoPosition.infos.title}</span>
                    {/* <span>
                     共计：{(this.state.currentDataSourceBellWether.length-1)<=0?0:(this.state.currentDataSourceBellWether.length-1)}
                    </span> */}
                  </div>
                )}
                selectedRows={selectedRows}
                loading={listLoading}
                data={newTwoPosition.infos}
                columns={this.columnsInfos}
                style={{ tableLayout: 'fixed' }}
                className={styles.TableLayout}
                pagination={false}
                // onChange={this.handleStandardTableChangeBellWether}
                // scroll={{x:'auto',y:'auto'}}
                // rowClassName={() => styles.editableRow}
                rowClassName={(record, index) =>
                  record.code === '合计:' ? styles.statisticssTableBackground : styles.ffffff
                }
                // rowKey="id"
              />
              <br />
              <br />
              <br />
              <StandardTable
                components={components}
                bordered
                title={() => (
                  <div style={{ textAlign: 'center', fontSize: '0.95rem' }}>
                    <span style={{ marginRight: 10 }}>龙头股</span>
                    <span>
                      共计：
                      {this.state.currentDataSourceBellWether.length - 1 <= 0
                        ? 0
                        : this.state.currentDataSourceBellWether.length - 1}
                    </span>
                  </div>
                )}
                selectedRows={selectedRows}
                loading={listLoading}
                data={newTwoPosition.bellWether}
                columns={this.columns}
                style={{ tableLayout: 'fixed' }}
                className={styles.TableLayoutFixedOne}
                pagination={false}
                onChange={this.handleStandardTableChangeBellWether}
                scroll={{ x: 1400, y: 628 }}
                // rowClassName={() => styles.editableRow}
                rowClassName={(record, index) =>
                  record.code === '合计:' ? styles.statisticssTableBackground : styles.ffffff
                }
                // rowKey="id"
              />
              <br />
              <br />
              <br />
              <StandardTable
                components={components}
                bordered
                title={() => (
                  <div style={{ textAlign: 'center', fontSize: '0.95rem' }}>
                    <span style={{ marginRight: 10 }}>ETF</span>
                    <span>
                      共计：
                      {this.state.currentDataSourceETF.length - 1 <= 0
                        ? 0
                        : this.state.currentDataSourceETF.length - 1}
                    </span>
                  </div>
                )}
                selectedRows={selectedRows}
                loading={listLoading}
                data={newTwoPosition.etf}
                columns={this.columns}
                style={{ tableLayout: 'fixed' }}
                className={styles.TableLayoutFixedOne}
                pagination={false}
                onChange={this.handleStandardTableChangeETF}
                scroll={{ x: 1400, y: 628 }}
                // rowClassName={() => styles.editableRow}
                rowClassName={(record, index) =>
                  record.code === '合计:' ? styles.statisticssTableBackground : styles.ffffff
                }
                // rowKey="id"
              />
            </EditableContext.Provider>
          )}
          <NewTwoFormModal Visible={Visible} closeVisbile={this.closeVisbile.bind(this)} />
        </Card>
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    const { dispatch } = this.props;

    /* 导入列表数据 */
    dispatch({
      type: 'fu/GetUBSNewTwoPosition',
      payload: {
        currentDataSourceBellWether: this.state.currentDataSourceBellWether,
        currentDataSourceETF: this.state.currentDataSourceETF,
      },
      callback: res => {
        this.setState({
          currentDataSourceBellWether: res.data.bellWether,
          currentDataSourceETF: res.data.etf,
        });
      },
    });
  }

  componentWillUnmount() {}
}

export default NewTwoForm;
